<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/12/4
  Time: 20:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <link rel="stylesheet" href="/asserts/css/login.css">
</head>
<body>
<h1>用户登录</h1>
<div class="login-form">
    <div class="login-item">
        <span>登录账号：</span>
        <input type="text" id="u" />
    </div>
    <div class="login-item">
        <span>登录密码：</span>
        <input type="password" id="p" />
    </div>
    <div class="login-item1">
        <span >验证码：</span>
        <input id="input-code" type="text" placeholder="请输入验证码" style="width: 165px;">
        <canvas id="verifi-code"></canvas>
    </div>
    <div class="login-item">
        <button onclick="handleLogin()">登录</button>
    </div>
</div>
<script src="/asserts/vendor/jquery.min.js"></script>
<script src="/asserts/js/login.js"></script>
</body>
<script>
    'use strict';
    var inputCode = document.getElementById('input-code');
    var canvas = document.getElementById('verifi-code');
    var code;
    function createCode() {
        let code = "";
        var codeLength = 4;
        var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
        for (var i = 0; i < codeLength; i++) {
            var charIndex = Math.floor(Math.random() * 36);
            code += selectChar[charIndex];
        }
        console.log("生成验证码 " + code);
        return code;
    }

    function draw_canvas(code) {
        if (canvas) {
            var ctx=canvas.getContext('2d');
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.font="30px Verdana";
            ctx.strokeText(code,50,70);
            console.log("canvas 绘制完成")
        }
        else
            console.log("没有找到canvas")
    }
    canvas.onclick = function () {
        code = createCode();
        draw_canvas(code);
    }
    window.onload = function () {
        code = createCode();
        draw_canvas(code);
    }

</script>
</html>
